<template>
  <div>
    <Header title="账号管理"></Header>
    <div>
      <van-field v-model="name" label="昵称" placeholder="请输入用户名">
      </van-field>
      <van-field v-model="sign" label="个性签名" placeholder="请输入签名" disabled>
      </van-field>
      <van-field v-model="password" label="密码" placeholder="请输入密码">
      </van-field>
    </div>

    <van-button type="primary" color="#ffc400" round block class="save-btn"
      @click="save">保存</van-button>
    <van-button type="primary" color="#ffc400" round block class="save-btn"
                @click="logout">退出登录</van-button>
  </div>
</template>

<script setup>
import Header from '@/components/Header'
import {ref} from "vue";
import {Toast} from "vant";
import router from "@/router";

const name = ref('')
const sign = ref('战胜自己是命运的强者')
const password = ref('')

const save = () => {
  if(name.value && password.value){
    let userInfo = JSON.parse(localStorage.getItem('userInfo'))
    let newUserInfo = {
      username: name.value || userInfo.username,
      password: password.value || userInfo.password
    }
    localStorage.setItem('userInfo', JSON.stringify(newUserInfo))
    Toast('保存成功')
    router.push('/mine')
  }else{
    Toast('请输入内容')
  }
}

const logout = () => {
  localStorage.removeItem('isLogin')
  Toast('退出登录成功')
  router.push('/login')
}
</script>

<style lang="less" scoped>
/deep/ .van-button--danger {
  background-color: #ffc400;
  border-color: #ffc400;
}
.save-btn {
  width: 80%;

  margin: 20px auto;
}

</style>